<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <script src="./js/vue.global.js"></script>
    <style>
        .container {
            margin: 50px;
        }

        .content {
            margin: 20px;
        }
    </style>
</head>

<body>
    <div id="Application">
        <div class="container">
            <div class="content">
                <input type="radio" :value="-1" v-model="sexFliter" />全部
                <input type="radio" :value="0" v-model="sexFliter" />男
                <input type="radio" :value="1" v-model="sexFliter" />女
            </div>
            <div class="content">搜索：<input type="text" v-model="searchKey" /></div>
            <div class="content">
                <table border="1" width="300px">
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                    </tr>
                    <tr v-for="(data, index) in showDatas" :key="index">
                        <td>{{data.name}}</td>
                        <td>{{data.sex == 0 ? '男' : '女'}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script>
        const { ref, watch, onMounted } = Vue;

        let mock = [
            {
                name: "小王",
                sex: 0
            },
            {
                name: "小红",
                sex: 1
            },
            {
                name: "小李",
                sex: 1
            },
            {
                name: "小张",
                sex: 0
            }
        ];

        const App = {
            setup() {
                const sexFliter = ref(-1);
                const showDatas = ref([]);
                const searchKey = ref("");

                const queryAllData = () => {
                    showDatas.value = mock;
                };

                const fliterData = () => {
                    searchKey.value = "";
                    if (sexFliter.value == -1) {
                        showDatas.value = mock;
                    } else {
                        showDatas.value = mock.filter((data) => {
                            return data.sex == sexFliter.value;
                        });
                    }
                };

                const searchData = () => {
                    sexFliter.value = -1;
                    if (searchKey.value.length == 0) {
                        showDatas.value = mock;
                    } else {
                        showDatas.value = mock.filter((data) => {
                            return data.name.includes(searchKey.value);
                        });
                    }
                };

                onMounted(() => {
                    setTimeout(queryAllData, 3000);
                });

                watch(sexFliter, () => {
                    fliterData();
                });

                watch(searchKey, () => {
                    searchData();
                });

                return {
                    sexFliter,
                    showDatas,
                    searchKey,
                };
            }
        };

        Vue.createApp(App).mount("#Application");
    </script>
</body>

</html>